<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>专题页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <th:block th:include="common/link::link"></th:block>
</head>

<body>
<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>
<div class="main">
    <div class="fly-panel">
        <div class="fly-tab">
        <span>
          <a href="javascript:void(0)" onclick="allFn()" name="all" id="all">综合</a><!--class="tab-this"-->
          <a href="javascript:void(0)" onclick="likeFn()" name="like" id="like">点赞 ↓</a>
          <a href="javascript:void(0)" onclick="commentFn()" name="comment" id="comment">评论⬇︎</a>
          <a href="javascript:void(0)" onclick="viewFn()" name="view" id="view">浏览量⇩</a>
        </span>
            <form action="http://cn.bing.com/search" class="fly-search">
                <i class="iconfont icon-sousuo"></i>
                <input class="layui-input" autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="q">
            </form>

        </div>
        <!--				<h3 class="fly-panel-title">推荐专题</h3>-->

        <ul class="fly-case-list" id="subject-list">
<!--            <th:block th:if="${not #lists.isEmpty(subjectList)}">
                <th:block th:each="subject,index:${subjectList}">
                    <li data-id="160">
                        <a class="fly-case-img" href="#" target="_blank">
                            <img src="../static/images/avatar/default.png" th:src="subject" alt="">
                            <cite class="layui-btn layui-btn-primary layui-btn-small">去围观</cite>
                        </a>
                        <h2><a href="#" target="_blank" th:text="${subject.subjectTitle}">标题</a></h2>
                        <p class="fly-case-desc" th:text="${subject.subjectDes}">描述</p>
                        <div class="fly-case-info">
                            <a href="/u/2802912" th:href="'http://'+ ${user.userId}" class="fly-case-user"
                               target="_blank">
                                <img src="http://q.qlogo.cn/qqapp/101235792/5068B86B734FD45F863F69BE6A08A6FF/100"
                                     th:src="${user.avatar}">
                            </a>
                            <p class="layui-elip" style="font-size: 12px;"><span th:text="${user.nickName}"
                                                                                 style="color: #666;">nacooo</span>
                                <span th:text="${subject.createTime}">13天前</span></p>
                            <p>获得
                                <a class="fly-case-nums fly-case-active" href="javascript:;" data-type="showPraise"
                                   style=" padding:0 5px; color: #01AAED;">6</a>个赞</p>
                            <button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">订阅</button>
                        </div>
                    </li>
                </th:block>
            </th:block>-->

        </ul>
    </div>
</div>

<th:block th:replace="common/footer::footer"></th:block>


</body>
<script type="text/javascript">
    $(function () {
        $(".nav a").removeClass("nav-this");
        $("#subject").addClass("nav-this")
        getData(1,1,1);
        /*        layui.use('form', function () {
                    var form = layui.form;

                    //各种基于事件的操作，下面会有进一步介绍
                    form.on('checkbox(like)', function (data) {
                        if (data.elem.checked) {
                            $("#like").val(1);
                        } else {
                            $("#like").val(0);
                        }
                        getData();
                    });
                    form.on('checkbox(comment)', function (data) {
                        if (data.elem.checked) {
                            $("#comment").val(1);
                        } else {
                            $("#comment").val(0);
                        }
                        getData();
                    });
                    form.on('checkbox(rss)', function (data) {
                        if (data.elem.checked) {
                            $("#rss").val(1);
                        } else {
                            $("#rss").val(0);
                        }
                        getData();
                    });

                });*/

    });
    function likeFn() {
        getData(1,0,0);
        $("a").removeClass("tab-this")
        $("#like").addClass("tab-this");
    };
    function commentFn() {
        getData(0,1,0);
        $("a").removeClass("tab-this")
        $("#comment").addClass("tab-this");
    };
    function viewFn() {
        getData(0,0,1);
        $("a").removeClass("tab-this")
        $("#view").addClass("tab-this");
    };
    function allFn() {
        getData(1,1,1);
        $("a").removeClass("tab-this")
        $("#all").addClass("tab-this");
    };
    function getData(like,comment,view) {
       //var rootPath =  [[${rootPath}]].toString();
        layui.use('flow', function () {
            var flow = layui.flow;
            var pageCount;
            flow.load({
                elem: '#subject-list', //流加载容器
                scrollElem: '#subject-list', //滚动条所在元素，一般不用填，此处只是演示需要。
                isAuto: false,
                isLazyimg: true,
                done: function (page, next) { //加载下一页
                    //模拟插入
                    setTimeout(function () {
                        var lis = [];
                        $.ajax({
                            type: 'POST',
                            url: "../subject/findSubjectList",
                            dataType: "json",
                            data: {
                                "pageNum": page,
                                "pageSize": 6,
                                "like": like,
                                "comment": comment,
                                "view": view
                            },
                            success: function (result) {

                                pageCount = result.data.pages;

                                $.each(result.data.list, function (index, simple) {

                                    lis.push('               <li data-id="160">\n' +
                                        '                        <a class="fly-case-img" href="../article/list/'+simple.cmsSubject.subjectId +'/' + simple.cmsSubject.subjectTitle + '" target="_blank">\n' +
                                        '                            <img src="http://img13.360buyimg.com/n1/jfs/t3214/126/2309313357/292133/6c038027/57e09a03Nc57334e1.jpg" th:src="' + simple.cmsSubject.cover + '" alt="">\n' +
                                        '                            <cite class="layui-btn layui-btn-primary layui-btn-small">去围观</cite>\n' +
                                        '                        </a>\n' +
                                        '                        <h2><a href="#" target="_blank" >' + simple.cmsSubject.subjectTitle + '</a></h2>\n' +
                                        '                        <p class="fly-case-desc">' + simple.cmsSubject.subjectDes + '</p>\n' +
                                        '                        <div class="fly-case-info">\n' +
                                        '                            <a href="/u/2802912" th:href="\'http://\'+ ${simple.user.userId}" class="fly-case-user"\n' +
                                        '                               target="_blank">\n' +
                                        '                                <img src="' + simple.ucenterUser.avatar + '">' +
                                        '                            </a>\n' +
                                        '                            <p class="layui-elip" style="font-size: 12px;">' +
                                        '                               <span style="color: #666;">' + simple.ucenterUser.nickName + '</span>' +
                                        '                               <span>' + getMyDate(simple.cmsSubject.createTime) + '</span></p>\n' +
                                        '                            <p>获得\n' +
                                        '                                <a class="fly-case-nums fly-case-active" href="javascript:;" data-type="showPraise"\n' +
                                        '                                   style=" padding:0 5px; color: #01AAED;">6</a>个赞</p>\n' +
                                        '                            <button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">订阅</button>\n' +
                                        '                        </div>\n' +
                                        '                    </li>');

                                    next(lis.join(''), page < pageCount);
                                    lis = [];
                                });

                            }
                        });
                    }, 500);
                }
            });

        });
    }
</script>
<!--<script th:inline="javascript">

    layui.use('flow', function () {
        var flow = layui.flow;
        var pageCount;
        flow.load({
            elem: '#subject-list', //流加载容器
            scrollElem: '#subject-list', //滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function (page, next) { //加载下一页
                //模拟插入
                setTimeout(function () {
                    var lis = [];
                                           $.ajax({
                                                type : 'POST',
                                                url : "../subject/findSubjectList",
                                                dataType : "json",
                                                data : {
                                                    "pageNum":page,
                                                    "pageSize":6,
                                                    "like":1,
                                                    "comment":0,
                                                    "view":0,
                                                    "rss":0
                                                },
                                                success : function(result) {

                                                    pageCount = result.data.pages;

                                                    $.each(result.data.list,function(index,simple){

                                                        lis.push('               <li data-id="160">\n' +
                                                            '                        <a class="fly-case-img" href="#" target="_blank">\n' +
                                                            '                            <img src="../../res/images/avatar/default.png" th:src="subject" alt="">\n' +
                                                            '                            <cite class="layui-btn layui-btn-primary layui-btn-small">去围观</cite>\n' +
                                                            '                        </a>\n' +
                                                            '                        <h2><a href="#" target="_blank" >'+simple.cmsSubject.subjectTitle+'</a></h2>\n' +
                                                            '                        <p class="fly-case-desc">'+simple.cmsSubject.subjectDes+'</p>\n' +
                                                            '                        <div class="fly-case-info">\n' +
                                                            '                            <a href="/u/2802912" th:href="\'http://\'+ ${simple.user.userId}" class="fly-case-user"\n' +
                                                            '                               target="_blank">\n' +
                                                            '                                <img src="'+simple.ucenterUser.avatar+'">' +
                                                            '                            </a>\n' +
                                                            '                            <p class="layui-elip" style="font-size: 12px;">' +
                                                            '                               <span style="color: #666;">'+simple.ucenterUser.nickName+'</span>\n' +
                                                            '                               <span>'+simple.cmsSubject.createTime+'</span></p>\n' +
                                                            '                            <p>获得\n' +
                                                            '                                <a class="fly-case-nums fly-case-active" href="javascript:;" data-type="showPraise"\n' +
                                                            '                                   style=" padding:0 5px; color: #01AAED;">6</a>个赞</p>\n' +
                                                            '                            <button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">订阅</button>\n' +
                                                            '                        </div>\n' +
                                                            '                    </li>');

                                                        next(lis.join(''), page < pageCount);
                                                        lis = [];
                                                    });

                                                }
                                            });
                }, 500);
            }
        });

    });
</script>-->
</html>